<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1200,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="http://static.h-ui.net/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>幻灯片效果</title>
<meta name="keywords" content="幻灯片效果"/>
<style type="text/css">
#slider-1{width:760px;text-align:center}
#slider-1 .bd,#slider-1 .bd li,#slider-1 .bd img{width:760px; height:220px}
#slider-1 .hd{ margin-top:2px;height:58px;width:762px; position: static; padding: 0;}
#slider-1 .hd li{ position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px;}
#slider-1 .hd li img{ display:block;width:125px; height:58px;}
#slider-1 .hd li i{ position:absolute; display:block; z-index:9; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6)}
#slider-1 .hd li.active i{ width:11px; height:6px; background:url(images/iconpic-arrow-up.png) no-repeat 0 0; top:-6px; left:50%; margin-left:-5px; bottom:auto; right:auto}
</style>
</head>
<body>
<div id="slider-1" class="bg-fff box-shadow radius">
	<div class="slider">
		<div class="bd bg-fff">
			<ul>
				<li><a href="#" target="_blank"><img src="images/b-1.jpg" ></a></li>
				<li><a href="#" target="_blank"><img src="images/b-2.jpg" ></a></li>
				<li><a href="#" target="_blank"><img src="images/b-3.jpg" ></a></li>
				<li><a href="#" target="_blank"><img src="images/b-4.jpg" ></a></li>
				<li><a href="#" target="_blank"><img src="images/b-5.jpg" ></a></li>
				<li><a href="#" target="_blank"><img src="images/b-6.jpg" ></a></li>
			</ul>
		</div>
		<ol class="hd cl">
			<li><i></i><img src="images/s-1.jpg"></li>
			<li><i></i><img src="images/s-2.jpg"></li>
			<li><i></i><img src="images/s-3.jpg"></li>
			<li><i></i><img src="images/s-4.jpg"></li>
			<li><i></i><img src="images/s-5.jpg"></li>
			<li><i></i><img src="images/s-6.jpg"></li>
		</ol>
	</div>
</div>
<script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
<script type="text/javascript">
$(function(){
	jQuery("#slider-1").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:850,interTime:7000,pnLoop:false,titOnClassName:"active"});
});
</script>
</body>
</html>